<template>
  <div>
    <div style="text-align: center; margin: 20px 0 30px 0;">
      <a-avatar
        v-if="response.headimgurl"
        :size="90"
        :src="response.headimgurl"
      />
      <a-avatar
        v-else-if="response.nickname"
        :size="90"
        style="color: #f56a00; background: #fde3cf;"
      >
        {{ response.nickname.slice(0, 1) }}
      </a-avatar>
      <a-avatar v-else :size="90" icon="user" />
      <br />
      {{ response.nickname }}
    </div>

    <a-form-model
      id="components-form-demo-normal-login"
      ref="formInline"
      :model="formInline"
      :rules="rules"
      class="login-form"
      @submit="handleSubmit"
    >
      <a-form-model-item has-feedback prop="mobile">
        <a-input
          v-model="formInline.mobile"
          size="large"
          :max-length="64"
          placeholder="手机号码 / 邮箱地址"
        >
          <a-icon
            slot="addonBefore"
            type="user"
            style="color: rgba(0, 0, 0, 0.25);"
          />
        </a-input>
      </a-form-model-item>

      <a-form-model-item prop="code">
        <a-input-search
          v-model="formInline.code"
          placeholder="验证码"
          :max-length="6"
          size="large"
          @search="sendsms"
        >
          <a-icon
            slot="addonBefore"
            type="lock"
            style="color: rgba(0, 0, 0, 0.25);"
          />
          <a-button slot="enterButton" :disabled="sendSmsBtnLock">
            {{ sendSmsBtnTxt }}
          </a-button>
        </a-input-search>
      </a-form-model-item>

      <a-form-model-item>
        <a-button
          type="primary"
          html-type="submit"
          :disabled="!mobileFlag || !codeFlag"
          class="login-form-button"
        >
          绑定账号
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import login from "@/api/login"

export default {
  data() {
    return {
      formInline: {
        mobile: "",
        code: "",
      },
      rules: {
        mobile: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请您输入手机或邮箱"))
              } else {
                if (!this.mobileFlag) {
                  callback(new Error("请您正确输入手机或邮箱"))
                }
                callback()
              }
            },
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              this.mobileFlag =
                this.$func.phoneCheck(value) || this.$func.mailCheck(value)
              this.sendSmsBtnLock = !this.mobileFlag
              callback()
            },
            trigger: "change",
          },
        ],
        code: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请您输入验证码"))
              } else {
                if (!this.codeFlag) {
                  callback(new Error("请您输入6位的验证码"))
                }
                callback()
              }
            },
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              this.codeFlag = value.length == 6
              callback()
            },
            trigger: "change",
          },
        ],
      },

      mobileFlag: false,
      codeFlag: false,
      submitBtnLock: true,
      sendSmsBtnLock: true,
      sendSmsBtnTxt: "获取验证码",
      waitSec: 60,

      response: {
        headimgurl: undefined,
        nickname: undefined,
      },
    }
  },
  mounted() {
    login.status().then((response) => {
      if (response.code !== 1) {
        this.$message.error(response.message)
        this.gotoLogin()
        return
      }

      //open_id
      this.response = response.data
      if (
        !Object.prototype.hasOwnProperty.call(this.response, "open_id") ||
        !this.response["open_id"]
      ) {
        this.gotoLogin()
        return
      }
    })
  },
  methods: {
    gotoLogin() {
      this.$router.to("/login")
    },
    sendsms() {
      if (this.sendSmsBtnLock) return
      login.sms(this.formInline.mobile).then((response) => {
        if (response.code !== 1) {
          this.$message.error(response.message)
          this.sendSmsBtnLock = false
          return
        }

        this.$message.success("验证码发送成功")

        this.sendSmsBtnLock = true
        this.waitSec = 60
        this.startSendSmsLock()
      })
    },
    startSendSmsLock() {
      this.sendSmsBtnTxt = this.waitSec + "秒后重新获取"
      setTimeout(() => {
        if (this.waitSec > 1) {
          this.waitSec--
          this.startSendSmsLock()
        } else {
          this.sendSmsBtnTxt = "重新获取"
          this.sendSmsBtnLock = false
        }
      }, 1000)
    },
    handleSubmit(e) {
      e.preventDefault()
      if (this.formInline.mobile == "" || this.formInline.code == "") return

      login
        .bind({
          mobile: this.formInline.mobile,
          code: this.formInline.code,
        })
        .then((response) => {
          if (response.code !== 1) {
            this.$message.error(response.message)
            return
          }
          this.$message.success("绑定成功.")

          let access_token = "",
            refresh_token = ""
          if (
            Object.prototype.hasOwnProperty.call(response.data, "access_token")
          ) {
            access_token = response.data["access_token"]
          }
          if (
            Object.prototype.hasOwnProperty.call(response.data, "refresh_token")
          ) {
            refresh_token = response.data["refresh_token"]
          }

          this.$token.set(access_token, refresh_token)
          this.$emit("ok")
        })
    },
  },
}
</script>

<style>
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>
